<template>
  <div style="width: 100vw; height: 100vh;  position: relative;">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>登录</span>
          <el-button class="button" text type="primary" @click="changeForm()">{{isLogin?'注册':'登录'}}</el-button>
        </div>
      </template>
      <el-form
          ref="formRef"
          :model="submitForm"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item
            label="名称"
            prop="username"
            :rules="[{ required: true, message: '名称必须填' }]"
        >
          <el-input
              v-model.number="submitForm.username"
              type="text"
              autocomplete="off"
          />
        </el-form-item>
        <el-form-item
            label="密码"
            prop="password"
            :rules="[ { required: true, message: '密码必须填' }]"
        >
          <el-input
              v-model.number="submitForm.password"
              type="text"
              autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit(formRef)">{{ isLogin?'登录':'注册'}}</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance } from 'element-plus'
import { loginApi} from  '@/api/LoginApi.ts'
import { useRouter } from "vue-router";
import {registerApi} from "@/api/RegisterApi.ts";
import appStore from "@/store/appStore.ts";
import { fetchPermissionTree } from "@/api/PermissionApi.ts";


const formRef = ref<FormInstance>()
const router = useRouter()
const isLogin = ref(true)

const submitForm = reactive({
  username: 'eren',
  password: '145055'
})

const app = appStore()

const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if( valid){
      if(isLogin.value){
        const res = await loginApi(submitForm)
        if (res.code === 200){
          app.token = res.data.token
          app.userInfo = res.data.user
          app.menuList = res.data.permissionList
          await router.push(app.menuList[0].children[0].path)
        }
      }else{
        const res = await registerApi(submitForm)
        if (res.code === 200){
          app.token = res.data.token
          isLogin.value = !isLogin.value
        }
      }
    }else {
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const changeForm = () => {
  isLogin.value=!isLogin.value
}

</script>


<style scoped>
.el-card{
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 #ffffff;
  outline: 0;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);

}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>